<template>
  <div>
    <el-card>
      <div>
        <el-input v-model="page.title" clearable placeholder="根据权限名称搜索" style="width:200px;" type="text">
        </el-input>
        <el-button size="small" style="margin-left: 15px" @click="getPermissionBancel">清空</el-button>
        <el-button size="small" type="primary" @click="getPermissionSearch">搜索</el-button>
        <el-button class="el-icon-edit" size="small" style="float: right; " type="success" @click="showPermissionAdd">
          {{ $t('table.permissionNew') }}
        </el-button>
      </div>
      <el-alert
        :closable="false"
        show-icon
        type="info">
        <template>
          共有{{ counts }}条记录
        </template>
      </el-alert>
      <el-table :data="list" :highlight-current-row="true">
        <el-table-column :label="$t('table.permissionName')" align="center" prop="title"></el-table-column>
        <el-table-column label="日期" prop="create_date" sortable>
          <template slot-scope="{row}">
            {{ row.create_date | formateDateFilter }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="{row}">
            <el-button circle class="el-icon-edit" type="primary"
                       @click="editPermission(row)"></el-button>
            <el-button circle class="el-icon-delete" type="danger"
                       @click="removePermission(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div style="display: flex;justify-content: end">
        <el-row justify="end" style="margin-top: 20px" type="flex">
        <el-pagination
          :current-page="page.page"
          :page-size="page.pagesize"
          :page-sizes="[1,3,5,7,10, 12, 13, 14]"
          :total="counts"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
        </el-row>
      </div>
    </el-card>
    <PermissionsAdd
      ref="PermissionsAddRef"
      :ruleInline="ruleInline"
      :text="text"
      pageTitle="权限"
      @handleCloseModal="handleCloseModal"
      @newDataes="newDataes"
    ></PermissionsAdd>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/permissions'
import PermissionsAdd from '@/module-manage/components/permissions-add'

export default {
  components: { PermissionsAdd },
  data () {
    return {
      text: null,
      currentId: null,
      ruleInline: {
        title: [
          {
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }
        ]
      },
      counts: 0,
      list: [],
      page: {
        page: 1,
        pagesize: 10,
        title: ''
      }
    }
  },
  filters: {
    formateDateFilter (date) {
      const res = date.split('-').map((item, i) => {
        if (i === 2) {
          // date.split('-')[2] = item.slice(0, 2)
          return item.slice(0, 2)
        }
        return item
      })
      return res.join('-')
    }
  },
  created () {
    this.getPermissionList()
  },

  methods: {
    showPermissionAdd () {
      this.text = '添加'
      this.$refs.PermissionsAddRef.dialogFormV()
    },
    async getPermissionList (data) {
      const res = await list(data)
      this.list = res.data.list
      this.counts = res.data.counts
    },
    getPermissionBancel () {
      this.page.title = ''
      this.getPermissionList()
    },
    async getPermissionSearch () {
      try {
        const { data } = await list(this.page)
        this.list = data.list
        this.counts = data.counts
      } catch (e) {
        console.log(e)
      }
    },
    // 改变页码数
    async handleSizeChange (value) {
      this.page.pagesize = value
      await this.getPermissionList(this.page)
    },
    // 改变当前第几页
    async handleCurrentChange (value) {
      this.page.page = value
      await this.getPermissionList(this.page)
    },
    editPermission (row) {
      this.text = '编辑'
      this.currentId = row.id
      this.$refs.PermissionsAddRef.dialogFormV()
      this.$refs.PermissionsAddRef.hanldeEditForm(row.id)
      // console.log(row.id)
    },
    async removePermission (row) {
      // console.log(row)
      try {
        await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove(row)
        await this.getPermissionList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.info('您已取消删除')
      }
    },
    newDataes (val) {
      this.$refs.PermissionsAddRef.dialogFormH()
      this.$refs.PermissionsAddRef.handleResetForm()
      this.getPermissionList()
      this.$message.success(`${val.id === 0 ? '添加' : '编辑'}权限成功`)
    },
    handleCloseModal () {
    }
  }
}
</script>

<style lang='less' scoped>
/deep/ .el-input--medium .el-input__inner {
  height: 32px;
}

.el-alert {
  margin: 20px 0
}
</style>
